<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myFont {
            /* 大小 */
            font-size: 26px;
            /* 粗细 默认值是普通 400 加粗是 bold 700*/
            font-weight: bold;
            /* 颜色 */
            color: brown;
            /* 行高 每一行占据高度, 可以是比例, 也可以是带单位 */
            /* 1, 就是跟当前字体大小一样 */
            /* 如果带单位, 就是那个单位的大小 */
            line-height: 52px;
        }
        .myText {
            /* 段落缩进 */
            /* text-indent: 2em; */
            /* 文字换行后对齐方式 */
            text-align: left;
            /* 背景色 */
            /* background: #eeeeee;
            background: brown; */
            background: url('https://img95.699pic.com/photo/50007/8277.jpg_wh860.jpg');
            /* 背景当中如果是用图片, 还可以设定图片大小, 位移, 是否可重复 */
        }
        a {
            /* 文本修饰 */
            text-decoration: none;
            font-size: 36px;
            font-weight: 700;
            /* 标准颜色名称 */
            /* color: brown; */
            /* 10进制 rgb 设定 */
            /* color: rgb(0,0,255); */
            /* 十六进制 */
            color: #00ff00;
        }
    </style>
</head>

<body>
    具体样式
    <div class="myFont">
        演示字体样式
    </div>
    <div class="myFont">
        演示字体样式
    </div>
    <p class="myText">
        主要内容：html+css+javascript
        html：超文本标记语言，标签设定结构, 整个页面的布局
        <a href="http://baidu.com">百度页面</a>
        css：级联样式表，美化布局
        javascript：简称js，动态渲染数据（处理内容，实现与用户的交互）比如菜单动态切换, 比如点击按钮, 提交购物车
    </p>
    <p class="myText">
        主要内容：html+css+javascript
        html：超文本标记语言，标签设定结构, 整个页面的布局
        css：级联样式表，美化布局
        javascript：简称js，动态渲染数据（处理内容，实现与用户的交互）比如菜单动态切换, 比如点击按钮, 提交购物车
    </p>
    <p class="myText">
        主要内容：html+css+javascript
        html：超文本标记语言，标签设定结构, 整个页面的布局
        css：级联样式表，美化布局
        javascript：简称js，动态渲染数据（处理内容，实现与用户的交互）比如菜单动态切换, 比如点击按钮, 提交购物车
    </p>
</body>

</html>